<template>
  <el-dialog
    title="新增员工"
    :visible.sync="visible"
    @open="isDestroyDepartmentCascader = true"
    @closed="isDestroyDepartmentCascader = false"
  >
    <!-- 表单 -->
    <el-form label-width="120px" :model="formData" :rules="rules" ref="form">
      <el-form-item prop="username" label="姓名">
        <el-input v-model="formData.username" style="width: 80%" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item prop="mobile" label="手机">
        <el-input v-model="formData.mobile" style="width: 80%" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item prop="timeOfEntry" label="入职时间">
        <el-date-picker v-model="formData.timeOfEntry" style="width: 80%" placeholder="请选择入职时间" />
      </el-form-item>
      <el-form-item prop="formOfEmployment" label="聘用形式">
        <el-select
          v-model="formData.formOfEmployment"
          style="width: 80%"
          placeholder="请选择"
          @visible-change="isShow => !isShow && $refs.form.validateField('formOfEmployment')"
        >
          <el-option label="正式" :value="1"></el-option>
          <el-option label="非正式" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="workNumber" label="工号">
        <el-input v-model="formData.workNumber" style="width: 80%" placeholder="请输入工号" />
      </el-form-item>
      <el-form-item prop="departmentName" label="所属部门">
        <!-- v-model  默认是   :value  @input   的组合， 但是也可以 通过 model 选项去修改的 -->
        <!-- 有两个事件 @show  @hide  分别表示级联下拉菜单显示和隐藏 -->
        <DepartmentCascader
          v-if="isDestroyDepartmentCascader"
          v-model="formData.departmentName"
          @hide="$refs.form.validateField('departmentName')"
          style="width: 80%"
        />
        <!-- props.emitPath - 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 -->
        <!-- props.checkStrictly 是否严格的遵守父子节点不互相关联 -->
        <!-- @focus="getDepartments" ==> 有个问题：点击右侧的小箭头时，不会触发 focus 事件，但是会显示下拉菜单 -->
        <!-- <el-cascader
          ref="departmentsCascader"
          style="width: 80%"
          :props="{ label: 'name', children: 'children', value: 'name', emitPath: false, checkStrictly: true }"
          @visible-change="isShow => (isShow ? getDepartments() : $refs.form.validateField('departmentName'))"
          v-model="formData.departmentName"
          :options="departments"
        ></el-cascader> -->
        <!-- <el-input v-model="formData.departmentName" style="width: 80%" placeholder="请选择部门" /> -->
      </el-form-item>
      <el-form-item prop="correctionTime" label="转正时间">
        <el-date-picker v-model="formData.correctionTime" style="width: 80%" placeholder="请选择转正时间" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="onOk">确定</el-button>
        <el-button size="small" @click="() => $refs.form.resetFields()">重置</el-button>
        <el-button size="small" @click="visible = false">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addEmployee } from '@/api/employees';
import { getDepartments } from '@/api/departments';
import { tranListToTreeDataByGroup } from '@/utils';

export default {
  name: 'AddEmployeeDialog',
  data() {
    return {
      isDestroyDepartmentCascader: false,
      departments: [], // 部门列表数据
      visible: false,
      formData: {
        username: '',
        mobile: '',
        timeOfEntry: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        correctionTime: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入姓名' },
          { min: 1, max: 4, message: '姓名长度为1~4位' },
        ],
        mobile: [
          { required: true, message: '请输入手机' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
        ],
        timeOfEntry: [{ required: true, message: '请输入入职时间' }],
        formOfEmployment: [{ required: true, message: '请选择聘用形式' }],
        workNumber: [{ required: true, message: '请输入工号' }],
        departmentName: [{ required: true, message: '请选择所属部门' }],
        correctionTime: [{ required: true, message: '请输入转正时间' }],
      },
    };
  },
  methods: {
    async getDepartments() {
      const { depts } = await getDepartments({ target: '.el-cascader-panel' });
      // const { depts } = await getDepartments({ target: this.$refs.departmentsCascader.$el });
      this.departments = tranListToTreeDataByGroup(depts, 'pid', '');
    },
    async onOk() {
      await this.$refs.form.validate();
      await addEmployee(this.formData, { target: this.$refs.form.$el });
      this.visible = false;
      this.$refs.form.resetFields();
      this.$emit('add-succ');
    },
  },
};
</script>
